<html>
<head>
  <style>
    p { active-on!: self:checked = !self:checked; }
    p:hover { text-decoration:underline; cursor:pointer; }
    p + ul { display:block; }
    p:checked + ul { display:none; }
  </style>  
<head>
<body>
  <h1>Simple collapsible list:</h1>  
  Click on group caption elements to collapse content.
  <p>first group:</p> 
  <ul>
    <li>item #1</li>
    <li>item #2</li>
    <li>item #3</li>
  </ul>
  <p>second group:</p>
  <ul>
    <li>item #1</li>
    <li>item #2</li>
    <li>item #3</li>
  </ul>
  <p>third group:</p>
  <ul>
    <li>item #1</li>
    <li>item #2</li>
    <li>item #3</li>
  </ul>
</body>
</html>
